<template>
	<div>
		<!-- 歌单 ，推荐 等 固定组件 -->
		<div class="musicStyle ">
			<div class="Style-title-more  flexRow">
				<div class="title">
					<h2>{{Title}}</h2>
				</div>
				<div class="more">更多</div>
			</div>
			<div class="StyleItems flexRow ">
				
				<router-link :to="{path:Path,query:{id:item.id,name:item.name,imgurl:item.picUrl}}" class="flewCol" :key="index" v-for="(item,index) in Data">
					<div class=" styleitem">
						<img :src="item.picUrl" />
					</div>
					<div>
						<p>{{cutString(item.name)}}</p>
						<p>{{cutString(item.copywriter)}}</p>
					</div>
				</router-link>


			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			//每日推荐歌单
			Data: {
				type: Array
			},
			Title: {
				type: String
			},
			Path:{
				type:String
			}
		},
		name: "",
		data() {
			return {
				//选择跳转路径
				
			}
		},
		created() {

		},
		mounted() {

		},
		methods: {
			
			//减少字数
			cutString(str) {
				if (str) {
					if (str.length > 6) {
						return str.substring(0, 6) + '...'
					}
					return str
				}


			}
		}
	}
</script>

<style>
	.flewCol p {
		font-size: small;
		text-align: center;
		font-weight: bold;
		color: #000000;
	}

	.styleitem {
		z-index: 15;
		width: 106px;
		height: 100%;
	}

	.StyleItems {
		z-index: auto;
		width: 335px;

		justify-content: space-between;
		margin: 13px auto;
	}

	.more {
		z-index: 33;
		width: 25px;

		margin: 5px 10px auto auto;
		font-size: 8px;
	}


	.title {
		z-index: 16;
		width: 78px;
		height: 30px;

	}

	h2 {
		color: #000000;
		font-size: larger;
	}

	.Style-title-more {
		z-index: auto;
		width: 100%;
		height: 30px;

		justify-content: space-between;
	}

	.musicStyle {
		width: 335px;
		height: 170px;
		margin: 31px auto;
	}
</style>
